<template>
    <div class="flex h-full w-full">
        <el-splitter @resize="handleSplitterResize">
            <el-splitter-panel :size="375" :min="150" class="overflow-hidden">
                <DesignSliceList />
            </el-splitter-panel>
            <el-splitter-panel :size="250" :min="150" class="overflow-hidden">
                <FileExplorer :default-path="workSpaceStore.data?.path" ref="fileExplorer2" watch />
            </el-splitter-panel>
            <el-splitter-panel :min="150">
                <WebExplorer
                    @background-image-selected="handleBackgroundImageSelected"
                    class="flex-1 px-1"
                    :default-url="workSpaceStore.data?.views?.replaceDesign?.defaultUrl"
                    @url-change="handleUrlChange"
                />
            </el-splitter-panel>
        </el-splitter>

        <!-- <FileExplorer ref="fileExplorer2" class="w-[250px]" watch />
        -->
    </div>
</template>

<script setup lang="ts">
import FileExplorer from '@/components/FileExplorer/FileExplorer.vue'
import { WebviewContent } from '@/components/WebExplorer/utils/webviewContent'
import WebExplorer from '@/components/WebExplorer/WebExplorer.vue'
import { useWorkSpaceStore } from '@/stores/workSpace'
import { useTemplateRef } from 'vue'
import DesignSliceList from './DesignSliceList.vue'

// 数据仓库
const workSpaceStore = useWorkSpaceStore()

const fileExplorer2 = useTemplateRef('fileExplorer2')

const handleBackgroundImageSelected = (path: string) => {
    // console.log(path)
    if (!path) return
    fileExplorer2.value?.highlightFile(path)
}

const handleSplitterResize = () => {
    WebviewContent.instances.forEach((item) => item.handleContainerResize())
}

const handleUrlChange = (url: string) => {
    workSpaceStore.update('views.replaceDesign.defaultUrl', url)
}

// onMounted(() => {

//     console.log(fileExplorer2.value?.highlightFile)
// })
</script>

<style scoped></style>
